<template>
  <div
    class="all"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <Return txt="个人成交率" style="background: #eee"></Return>
    <div class="input" @click="show = true">
      <van-icon v-if="search == ''" class="input_icon" name="search" />
      <input
        type="text"
        class="inputAl"
        v-model="search"
        
        placeholder="搜索年月"
      />
    </div>
    <div class="time">2020年9月</div>
    <div class="list">
      <div class="listLeft">当月成交率</div>
      <div class="listRight">20%</div>
    </div>
    <div class="list">
      <div class="listLeft">总客户</div>
      <div class="listRight">200人</div>
    </div>
    <div class="list">
      <div class="listLeft">新增客户</div>
      <div class="listRight">200人</div>
    </div>
    <div class="time">当月</div>
    <div class="list">
      <div class="listLeft">当月成交率</div>
      <div class="listRight">20%</div>
    </div>
    <div class="list">
      <div class="listLeft">总客户</div>
      <div class="listRight">200人</div>
    </div>
    <div class="list">
      <div class="listLeft">新增客户</div>
      <div class="listRight">200人</div>
    </div>
     <van-popup v-model="show" position="bottom">
       <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
       
        :formatter="formatter"
        @confirm='confirm'
        @cancel="cancel"
        />
    </van-popup>
  </div>
</template>
<script>
import Return from "../../../components/return";
export default {
  components: {
    Return,
  },
  data() {
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
     
      show:false,
      search: "",
      screenWidth: window.innerWidth,
      screenHeight: window.innerHeight,
    };
  },
  methods: {
   formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      }
      return val;
    },
  
    confirm(){

    },
    cancel(){

    },
    returnTap() {
      this.$router.go(-1);
    },
    nextTap() {
      this.show = true;
    },
  },
};
</script>
<style scoped>
.all {
  background: #4AC7D7;
}
.top {
  height: 60px;
  width: 90%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 60px;
  position: relative;
  background: #4AC7D7;
}
.input {
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
  position: relative;
  background: #4AC7D7;
}
.input_icon {
  position: absolute;
  left: 40%;
  top: 15px;
  font-size: 18px;
}
.inputAl::-webkit-input-placeholder {
  padding-left: 5%;
}
.inputAl {
  height: 35px;
  width: 96%;
  border: none;
  text-align: center;
}
.time {
  width: 100%;
  height: 25px;
  background: #4ac7d7;
  text-align: center;
  line-height: 25px;
  font-size: 18px;
  color: #fff;
}
.list {
  padding: 0 5%;
  border-bottom: 5px solid #fff;
  width: 90%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.listLeft {
  width: 150px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #FF696A;
  color: white;
  border-radius: 5px;
}
.listRight {
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #FF696A;
    color: white;
  border-radius: 5px;
}
</style>